<template>
  <div>
    <!-- table -->
    <a-card>
      <div class="table-operator">
        <div style="margin-bottom:15px;">
          {{ $t('deviceList.gy') }} <b>{{total}}</b> {{ $t('deviceList.tjl') }}
          <a-button>
            <a target="_blank" :href="$hostServer+'/admin/export/device?api_token='+curr_token">导出Excel</a>
          </a-button>
        </div>
      </div>
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="false"
        :loading="memberLoading"
      >
        <template slot="img" slot-scope="text">
          <template>
            <img @click="handleClickReview($hostServer+text)" class="table-img" :src="$hostServer+text" alt="">
          </template>
        </template>
        <template slot="info" slot-scope="text, record">
          <pre>{{JSON.stringify(JSON.parse(record.info), null, 4)}}</pre>
        </template>
        <template slot="operation" slot-scope="text, record">
          <span>
            <a-popconfirm title=this.$t('deviceList.sfysccx') @confirm="remove(record.key, record.id)">
              <a style="color:red">删除</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { mixin, mixinDevice } from '@/utils/mixin'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  name: 'deviceInfo',
  mixins: [mixin, mixinDevice],
  components: {
  },
  data () {
    return {
      description: this.$t('deviceList.sjlb'),
      loading: false,
      memberLoading: false,
      curr_id: '',
      // table
      columns: [
        {
          title: this.$t('deviceList.lx'),
          dataIndex: 'belong',
          key: 'belong',
          scopedSlots: { customRender: 'username' }
        },
        {
          title: this.$t('deviceList.xx'),
          dataIndex: 'info',
          key: 'info',
          scopedSlots: { customRender: 'info' }
        },
        {
          title: this.$t('deviceList.cz'),
          key: 'action',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: [],
      total: 0,
      errors: [],
      curr_token: ''
    }
  },
  created () {
    this.getList()
    this.curr_token = this.$ls.get(ACCESS_TOKEN)
  },
  methods: {
    getList () {
      this.$http.get('/device/list').then(res => {
        this.data = res.list
        this.total = res.total
      }).catch(err => {
        this.$notification.error({
          message: this.$t('deviceList.sb'),
          description: err.message
        })
      })
    },
    remove (key, id) {
      this.$http.post('/device/delete', this.$qs.stringify({
        id: id
      })).then(res => {
        if (res.code === 0) {
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('deviceList.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('deviceList.sb'),
          description: err.message
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .card{
    margin-bottom: 24px;
  }
</style>
